import styles from "./index.less";
import React, { useState } from "react";
import { Button, Modal, Form, Input } from "antd";
import { useDispatch, history } from 'umi';

interface Values {
  title: string;
  description: string;
  modifier: string;
}

interface CollectionCreateFormProps {
  visible: boolean;
  onCreate: (values: Values) => void;
  onCancel: () => void;
  orderInfo: {};
}

const CollectionCreateForm: React.FC<CollectionCreateFormProps> = ({
  visible,
  onCreate,
  onCancel,
  orderInfo,
}) => {
  const [form] = Form.useForm();
  return (
    <Modal
      visible={visible}
      title="请输入交易密码"
      okText="确定"
      cancelText="取消"
      onCancel={onCancel}
      onOk={() => {
        form
          .validateFields()
          .then((values) => {
            form.resetFields();
            onCreate(values);
          })
          .catch((info) => {
            console.log("Validate Failed:", info);
          });
      }}
    >
      <Form
        form={form}
        layout="vertical"
        name="form_in_modal"
        initialValues={{ modifier: "public" }}
      >
        <Form.Item
          name="tradePassward"
          label="交易密码"
          rules={[
            {
              required: true,
              message: "请输入交易密码!",
            },
            ({ getFieldValue }) => ({
              validator(rule, value) {
                if (!value || getFieldValue("tradePassward") === value) {
                  return Promise.resolve();
                }
                return Promise.reject(
                  "The two passwords that you entered do not match!"
                );
              },
            }),
          ]}
        >
          <Input.Password />
        </Form.Item>
      </Form>
    </Modal>
  );
};

const CollectionsPage = (props) => {
  const [visible, setVisible] = useState(false);
  // console.log("orderInfo", props.orderInfo)
  const dispatch = useDispatch()

  const onCreate = (values) => {
    dispatch({
      type: 'productWorkplace/createApplyOrder',
      params: {
        orderInfo:  Object.assign(props.orderInfo , values)
      },
    });
    setVisible(false);
    history.push('/orderPage')
  };

  return (
    <div>
      <Button
        type="primary"
        onClick={() => {
          setVisible(true);
        }}
      >
        确认下单
      </Button>
      <CollectionCreateForm
        visible={visible}
        orderInfo={props.orderInfo}
        onCreate={onCreate}
        onCancel={() => {
          setVisible(false);
        }}
      />
    </div>
  );
};

export default (props) => (
  <div className={styles.container}>
    <div id="components-form-demo-form-in-modal">
      <CollectionsPage orderInfo={props.orderInfo} />
    </div>
  </div>
);
